<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>flex比例分配</title>
</head>
<style>

.flex-container {
	display: flex;
	flex-direction: row;
	width: 400px;
	height: 250px;
	background-color: lightgrey;
}
.flex-item {
	background-color: cornflowerblue;
	margin: 10px;
}

.item1 {
	flex: 2;
}
.item2 {
	flex: 1;
}
.item3 {
	flex: 1;
}

.item4 {
	width: 50px;
}
.item5 {
	flex: auto;
}
.item6 {
	width: 50px;
}

</style>
<body>

flex 属性用于指定弹性子元素如何分配空间。<br>
第一个弹性子元素占用了 2/4 的空间，其他两个各占 1/4 的空间<br><br>

<div class="flex-container">
	<div class="flex-item item1">flex item 1</div>
	<div class="flex-item item2">flex item 2</div>
	<div class="flex-item item3">flex item 3</div> 
</div>

<br><br>
盒子4和盒子6占指定宽度，剩余的都给盒子5<br><br>
<div class="flex-container">
	<div class="flex-item item4">flex item 4</div>
	<div class="flex-item item5">flex item 5</div>
	<div class="flex-item item6">flex item 6</div> 
</div>

</body>
</html>
